<template>

    <el-button text @click="centerDialogVisible = true">
        登录
    </el-button>

    <div>
        <el-switch v-model="value1" :active-icon="Check" :inactive-icon="Close"></el-switch>
    </div>





    <!-- 登录 -->
    <div>
        <el-dialog v-model="centerDialogVisible" width="40%" lock-scroll="true" close-on-click-modal="flase"
            align-center>
            <div slot="title" class="dialog-title">
                <div class="title_r"> 
                    <span class="title_span" :class=" buttonStyle ?  'activ' : ''" @click="BottomLeft()">账号登录</span>
                    <span class="title_span" :class=" buttonStyle ?  '' : 'activ'" @click="BottomRight()">短信登录</span>
                </div>

            </div>
            <div class="login">
                <div class="login_left">

                </div>
                <img src=""
                    data-v-34a737ac="" style="height: 30em; float: left; margin-left: 1px;">

                <div class="login_right">
                    <div  :class=" buttonStyle ?  '' : 'conceal'">
                    <div class="login_right_box">
                        <input type="" style="" placeholder="手机号/用户名/邮箱" />
                    </div>
                    <div class="login_right_box">
                        <input type="password" style="margin-top: 50px;" placeholder="密码" />
                    </div>    
                </div>

                <div  :class=" buttonStyle ?  'conceal' : ''">
                    <div class="login_right_box">
                        <input type="" style="" placeholder="请输入手机号" />
                    </div>
                    <div class="login_right_box">
                        <input type="password" style="margin-top: 50px;" placeholder="验证码" />
                        <button  class="pass-item-timer">发送验证码</button>
                    </div>
                </div>

                <span class="login__span">还没有账号?<a>点击注册></a></span>

                </div>  
                

               

            </div>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="centerDialogVisible = false">
                        登录
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>

    <el-button text @click="registerVisible = true">
        注册
    </el-button>
        <!-- 注册 -->
        <div>
        <el-dialog v-model="registerVisible" width="40%" lock-scroll="true" close-on-click-modal="flase"
            align-center>
            <div class="dialog-title">
                <div class="title_r"> 
                    <span class="title_span" @click="BottomLeft()">账号注册</span>
                </div>

            </div>
            <div class="regist">
                <div class="regist_left">

                </div>
                <img src=""
                    data-v-34a737ac="" style="height: 30em; float: left; margin-left: 1px;">

                <div class="regist_right">
                    <div>
                        <div class="regist_right_box">
                        <input type="" style="" placeholder="用户名" />
                    </div>
                    <div class="regist_right_box">
                        <input type="" style="margin-top: 20px;" placeholder="手机号" />
                    </div>
                    <div class="regist_right_box">
                        <input type="" style="margin-top: 20px;" placeholder="验证码" />
                    </div>
                    <div class="regist_right_box">
                        <input type="password" style="margin-top: 20px;" placeholder="密码" />
                    </div>    
                    <div class="regist_right_box">
                        <input type="password" style="margin-top: 20px;" placeholder="重复密码" />
                    </div>
                </div>

                <span class="regist__span">已有账号?<a>点击登录></a></span>

                </div>  
                

               

            </div>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="registerVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="registerVisible = false">
                        注册
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>

    
    <div style="height: 10000px;">

</div>

</template>

<script>
import { BottomLeft } from '@element-plus/icons-vue';

export default {
    name: 'ProjectAllHead',

    data() {
        return {
            centerDialogVisible: false,
            registerVisible:false,
            value1: false,
            Check: "Check",
            Close: "Close",
            buttonStyle: true,
        };
    },

    mounted() {

    },

    methods: {
        BottomLeft(){
            this.buttonStyle = true;
        },
        BottomRight(){
            this.buttonStyle = false;
        }

    },
};
</script>

<style lang="css" scoped>
.dialog-title {
    margin-bottom: 2em;
}

.conceal{
    display:none
}

.title_r{
    width: 50%;
    float: right;
    display: flex;
    justify-content: space-evenly
}

.title_span {

    font-size: 1.5em;
    border: none;
    outline: none;
    background-color: transparent;
    position: relative;
    cursor:pointer;
}

.title_span.activ::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #4e6ef2;
    border-radius: 1px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.pass-item-timer{
    display: block;
    position: absolute;
    right: 24px;
    top: 70px;
    width: 100px;
    font-size: 16px;
    line-height: 16px;
    transition: .3s;
    color: #4e6ef2;
    border: 0;
    border-left: 1px solid #dedede;
    background-color: #fff;
    cursor: default;
    z-index: 100;
    cursor: pointer;
}

:deep(.el-dialog__body) {
    padding: 0 0 0 0 !important;
}

.login {
    width: 100%;
    height: 20em;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.login_left {
    width: 50%;
    height: 100%;
    background-color: orange;

}

.login_right {
    width: 50%;

}


.login .login_right .login_right_box {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: baseline;
    position: relative;
}

.login .login_right .login_right_box input {
    width: 80%;
    padding: 15px;
    border-radius: 8px;
    caret-color: #4e6ef2;  /*指针颜色*/
    border: 1px solid #b8b8b8;

}

.login__span{
    float: left;
    margin: 25px 0 0 25px;
}
.login__span a{
    color: #4e6ef2;
    cursor: pointer;
}

.regist {
    width: 100%;
    height: 26em;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.regist_left {
    width: 50%;
    height: 100%;
    background-color: orange;

}

.regist_right {
    width: 50%;

}


.regist .regist_right .regist_right_box {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: baseline;
    position: relative;
}

.regist .regist_right .regist_right_box input {
    width: 80%;
    padding: 15px;
    border-radius: 8px;
    caret-color: #4e6ef2;  /*指针颜色*/
    border: 1px solid #b8b8b8;

}

.regist__span{
    float: left;
    margin: 25px 0 0 25px;
}
.regist__span a{
    color: #4e6ef2;
    cursor: pointer;
}
</style>